<template>
   <div class="nav2">
      <router-link :to="tab.to" active-class="active" v-for="tab in tabs" :key="tab.name">{{tab.name}}</router-link> 
    </div>
</template>


<script>
export default {
  name: 'Tabbar',
  props: {
    tabs: Array
  },
  mounted(){
    console.log(this.tabs);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav2 {
  width: 100%;
  height:40px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  bottom: 0px;
  left: 0px;
  a{
    text-decoration: none;
  }
  .active{
    color: orange;
  }
}
</style>
